
<template>
    <div class="container">
        <headMenu />
        <a-card class="general-card" title="查询">
            <!--  查询   -->
            <a-row>
                <a-col :flex="1">
                    <a-form :model="pageData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                        label-align="left">
                        <a-col :span="9">
                            <a-form-item field="tableName" label="表名">
                                <a-input placeholder="表名" v-model="pageData.tableName" />
                            </a-form-item>
                        </a-col>
                    </a-form>
                </a-col>

                <a-col :flex="'86px'" style="text-align: right; position: relative; right: 200px">
                    <a-space direction="vertical" :size="18">
                        <a-button type="primary" @click="search">
                            <template #icon>
                                <icon-search />
                            </template>
                            {{ $t('searchTable.form.search') }}
                        </a-button>
                        <!-- <a-button @click="reset">
                            <template #icon>
                                <icon-refresh />
                            </template>
                            {{ $t('searchTable.form.reset') }}
                        </a-button> -->
                        <a-button type="primary" @click="updateEdit(-1)">
                            <template #icon>
                                <icon-plus />
                            </template>
                            {{ $t('searchTable.operation.create') }}
                        </a-button>
                    </a-space>

                </a-col>

            </a-row>

            <!--  渲染数据  -->
                <a-table row-key="urId" :bordered="false" :data="data" @selection-change="selectionChange"
                    style="margin-top: 30px" :pagination="false" :hoverable="true">
                    <template #columns>
                        <!---

                    private String tableName;

                    private String comment;
                        -->
                        <a-table-column data-index="tableName" title="表名">
                        </a-table-column>
                        <a-table-column data-index="comment" title="表注释">
                        </a-table-column>
                        <a-table-column title="设计表">
                            <template #cell="{ record }">
                                <a-button @click="updateEdit(record.tableName)" type="outline">编辑</a-button>
                            </template>
                        </a-table-column>

                        <a-table-column title="后端生成">
                            <template #cell="{ record }">
                                <a-button @click="createCode(record.tableName)" type="outline">后端生成</a-button>
                            </template>
                        </a-table-column>


                        <a-table-column title="前端生成">
                            <template #cell="{ record }">
                                <a-button @click="vueCode(record.tableName)" type="outline">前端生成</a-button>
                            </template>
                        </a-table-column>

                    </template>
                </a-table>

                <a-modal v-model:visible="visibleT" title="模块名" @cancel="handleCancel" @ok="createOk">
                    <a-form :model="createData">
                        <a-form-item field="moduleName" label="模块名">
                            <a-input v-model="createData.moduleName" />
                        </a-form-item>
                    </a-form>
                </a-modal>


                <a-modal v-model:visible="visibles" title="前端vue页面生成" @cancel="handleCancel" @ok="vueCodeOk">
                    <a-form :model="createData">
                        <a-form-item field="moduleName" label="模块名">
                            <a-input v-model="createData.moduleName" />
                        </a-form-item>
                        <a-form-item field="requestUrl" label="后端请求地址">
                            <a-input v-model="createData.requestUrl" />
                        </a-form-item>
                    </a-form>
                </a-modal>
        </a-card>
    </div>
</template>

<script>
import api from '@/api/table/index';
import headMenu from '@/components/headMenu/headMenu.vue';

export default {
    components: { headMenu },
    data() {
        return {
            createData: {},
            visibleT: false,
            visibles: false,
            form: {},
            loading: true,
            deleteIds: [],
            ediVisible: false,
            menusName: this.$router.currentRoute.value.meta.locale,
            pageData: {
                id: '',
                name: '',
                createTime: '',
                endTiem: '',
                status: '',
                page: '1',
                pageSize: 10,
                totalCount: 0,
                totalPage: 0,
            },

            data: [],
        };
    },

    methods: {
        updateEdit(tableName) {
            // console.log("tableName", tableName);
            this.$router.push({ name: "editTable", query: { "tableName": tableName || '', status: tableName } })
        },
        vueCodeOk() {
            const obj = {
                tableName: this.createData.tableName,
                moduleName: this.createData.moduleName,
                requestUrl: this.createData.requestUrl,
                path: OBJECT_PATH
            };
            api.vueCode(obj).then(res => {
                // console.log(obj)
            })
            this.$notification.success('前端代码生成成功!');
            this.visibles = false
            this.createData = {}

        },
        vueCode(tableName) {
            console.log(tableName);
            this.createData.tableName = tableName
            this.visibles = true
        },
        createOk() {
            api.createCode(this.createData).then(res => {
                // if (res.data.success) {
                this.$notification.success('后端代码生成成功!');
                //}
            })
            this.createData = {}
            this.visibleT = false
            this.handleCancel()
        },
        createCode(tableName) {
            // console.log(tableName);
            this.createData.tableName = tableName
            this.visibleT = true
        },
        /**
         * 取消弹窗
         */
        handleCancel() {
            this.ediVisible = false;
            this.visibles = false
            this.visibleT = false
            this.form = {};
        },

        /**
         * 提交判断是添加还是删除
         */
        handleSubmit() {
            if (this.form.ogId !== undefined) {
                this.updateSubmit();
            } else {
                this.addSumeit();
            }
        },

        /**
         * 提交修改
         */
        updateSubmit() {
            api.updateAdd(this.form).then((res) => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$notification.success('修改成功!');
                    this.reset();
                    this.form = {};
                } else {
                    this.$notification.error('修改失败!');
                }
            });
        },

        /**
         *  添加提交
         */
        addSumeit() {
            api.updateAdd(this.form).then((res) => {
                if (res.data.code === 200) {
                    //添加成功
                    this.$notification.success('添加成功!');
                    this.reset();
                    this.ediVisible = false;
                    this.form = {};
                } else {
                    this.$notification.error('添加失败!');
                }
            });
        },
        /**
         * 新添加的方法
         */
        addInfo() {
            this.ediVisible = true;
        },

        /**
         * 判断当前的修改还是添加
         */
        updateAndAdd(id) {
            if (id !== undefined) {
                this.updateInfo(id);
            } else {
                this.addInfo();
            }
        },

        /**
         * 修改前先查询id
         */
        updateInfo(Id) {
            this.loading = true;
            api.info(Id).then((res) => {
                this.form = res.data.data.data;
                this.ediVisible = true;
                this.loading = false;
            });
        },

        /**
         * 删除选中的方法
         */
        subitmDeleteIds() {
            api.delete(this.deleteIds).then((res) => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$notification.success('删除成功!');
                    this.reset();
                } else {
                    this.$notification.error('删除失败!');
                }
            });
        },
        /**
         * 查询数据
         */
        search() {

            //发送请求
            this.getList();
        },
        /**
         *  刷新查询的数据
         */
        reset() {
            this.ediVisible = false;
            this.pageData = {
                id: '',
                name: '',
                createTime: '',
                endTime: '',
                status: '',
                page: '1',
                pageSize: 10,
                totalCount: 0,
                totalPage: 0,
            };
            this.getList();
        },

        /**
         *  选中
         */
        selectionChange(data) {
            this.deleteIds = data;
        },
        /**
         *  选择页码
         */
        changePage(currPage) {
            this.pageData.page = currPage;
            this.getList();
        },
        //选择分页大小
        limitChange(pageSize) {
            this.pageData.pageSize = pageSize;
            this.getList();
        },

        /**
         *  获取当前数据
         */
        getList() {
            this.loading = true;
            api.list(this.pageData).then((res) => {
                console.log("****=>Res", res);
                this.data = res.data.data.data;
                this.loading = false;
            });
        },
        /**
         *  删除账号
         */
        submitDelete(id) {
            let data = [];
            data.push(id);
            api.delete(data).then((res) => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$notification.success('删除成功!');
                    this.reset();
                } else {
                    this.$notification.error('删除失败!');
                }
            });
        },
    },
    created() {
        this.getList();
        console.log("OBJECT_PATH", OBJECT_PATH);
    },
};
</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}

:deep(.arco-table-th) {
    &:last-child {
        .arco-table-th-item-title {
            margin-left: 16px;
        }
    }
}
</style>
